<!--
 * @author  dumeng
-->
<template>
  <div class="works-check">
    <div class="page-left">
      <div class="left-top">
        <div class="title">{{ worksInfo.worksName }}</div>
        <div class="auther-info">
          <span>作者：{{ worksInfo.authorRealName }}</span>
          <span>上传时间：{{ worksInfo.crtTime }}</span>
        </div>
      </div>
      <div class="left-bottom">
        <el-row :gutter="20">
          <el-col
            v-for="item in worksInfo.imgIds"
            :key="item"
            :span="12"
          >
            <el-image

              :src="view + item"
              :preview-src-list="[view + item]"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline" />
              </div>
            </el-image>
          </el-col>
          <el-col
            v-for="item in worksInfo.videoIds"
            :key="item"
            :span="12"
          >
            <video :src="view + item" controls poster="../images/check-video-poster.png" />
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="page-right">
      <div class="right-top">
        <div class="title">作品审核</div>
        <el-radio-group v-model="form.auditResult">
          <el-radio label="AUDITRESULT02">审核通过</el-radio>
          <el-radio label="AUDITRESULT03">审核不通过</el-radio>
        </el-radio-group>
        <el-input
          v-model="form.auditRemark"
          rows="4"
          resize="none"
          type="textarea"
          placeholder="请填写审核说明"
        />
        <div class="check-footer">
          <el-button style="padding: 8px 15px;" @click="handleCancel">关闭</el-button>
          <el-button style="padding: 8px 15px;" type="primary" @click="handleSubmit('next')">
            确定并下一个
          </el-button>
        </div>
      </div>
      <div class="right-bottom">
        <div class="title">作品封面：</div>
        <el-image
          class="cover-image"
          :src="view + worksInfo.worksCover"
          :preview-src-list="[view + worksInfo.worksCover]"
        >
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
        <!--        <div class="comment">-->
        <!--          <span>评论：<b>{{ total }}</b></span>-->
        <!--          <el-button type="text" @click="commentDialog = true">查看 ></el-button>-->
        <!--        </div>-->
        <div class="works-remark">
          <p class="title">作品说明：</p>
          <div class="remark-content" v-html="worksInfo.worksRemark" />
        </div>
      </div>
    </div>
    <el-dialog
      v-el-drag-dialog
      v-loading="previewLoading"
      :close-on-click-modal="false"
      :visible.sync="commentDialog"
      :title="`评论（${total}）条`"
      width="80%"
      center
      class="commont-dialog"
    >
      <div class="preview-container">
        <section ref="commentContent" class="comment-con">
          <section v-if="isNoData4comment">
            暂无评论
          </section>
          <ul v-else v-infinite-scroll="onLoad" :infinite-scroll-delay="1000">
            <li
              v-for="(item, index) in commentData"
              :key="index"
              class="comment-item"
            >
              <!--              <img :src="view + item.userView" alt>-->
              <img :src="view + '082f70e5-329a-4ae4-a5e2-2a8144ba50fb'" alt>
              <section class="comment-item-right">
                <section class="comment-item-right-content">
                  <section class="comment-name etc">
                    {{ item.userIdName || "张三" }}
                  </section>
                </section>
                <section class="comment-content">
                  {{ item.commentContent }}
                </section>
                <section v-if="item.userImgs" class="comment-img">
                  <el-image
                    v-for="ite in item.userImgs ? item.userImgs.split(','): ''"
                    :key="ite"
                    :z-index="99999"
                    :src="view + '082f70e5-329a-4ae4-a5e2-2a8144ba50fb'"
                    :preview-src-list="[view + '082f70e5-329a-4ae4-a5e2-2a8144ba50fb']"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline" />
                    </div>
                  </el-image>
                </section>
                <section class="comment-time">
                  {{ item.crtTime }}
                </section>
                <ul
                  v-if="
                    item.newsSonCommentVOList &&
                      item.newsSonCommentVOList.rows &&
                      item.newsSonCommentVOList.rows.length
                  "
                  class="reply-content"
                >
                  <li
                    v-for="ite in item.newsSonCommentVOList.rows"
                    :key="ite.id"
                  >
                    <p class="reply-info">
                      <template>
                        <span
                          class="replyer"
                        >{{ ite.userIdName || "张五" }}<span>回复</span>{{ ite.commentParentIdName || "张四" }}：</span>
                      </template>
                      <span class="reply-info">{{ ite.commentContent }}</span>
                    </p>
                    <section v-if="ite.userImgs" class="reply-img">
                      <el-image
                        v-for="it in ite.userImgs ? ite.userImgs.split(','): ''"
                        :key="it"
                        :z-index="99999"
                        :src="view + '082f70e5-329a-4ae4-a5e2-2a8144ba50fb'"
                        :preview-src-list="[view + '082f70e5-329a-4ae4-a5e2-2a8144ba50fb']"
                      >
                        <div slot="error" class="image-slot">
                          <i class="el-icon-picture-outline" />
                        </div>
                      </el-image>
                    </section>
                    <section class="reply-time">
                      {{ ite.crtTime }}
                    </section>
                  </li>
                  <section
                    v-if="item.newsSonCommentVOList.rows.length < item.newsSonCommentVOList.total"
                    class="get-son"
                    @click="
                      getMoreComment(
                        index,
                        item.newsSonCommentVOList.rows.length,
                        item.id
                      )
                    "
                  >
                    查看更多
                  </section>
                </ul>
              </section>
            </li>
          </ul>
        </section>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  audit,
  get,
  queryPage4comment,
  queryPage4commentSon
} from '../api/works'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
export default {
  name: 'WorksCheck',
  directives: { elDragDialog },
  data() {
    return {
      loading: false,
      showtinymce: false,
      type: '',
      worksInfo: {
      },
      previewSrcList: [],
      view: '/API-DOCUMENT/document/file/download?id=',
      form: {
        id: '',
        auditResult: 'AUDITRESULT02',
        auditRemark: ''
      },
      rules: {
        auditResult: [
          { required: true, message: '请选择审核结果', trigger: 'change' }
        ],
        auditRemark: [
          { required: true, message: '请输入审核原因', trigger: 'blur' }
        ]
      },
      t: '', // check 审核  view 查看作品   reject 驳回
      commentDialog: false,
      isNoData4comment: false,
      previewLoading: false,
      total: 0,
      commentData: [],
      page: 1,
      pageSize: 5,
      finished: false
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  created() {
    if (!this.$route.query.i) {
      this.$message({
        showClose: true,
        message: '参数异常！',
        type: 'warning',
        onClose: () => {
          this.$router.back()
        }
      })
      return
    }
    this.form.id = this.$route.query.i
    this.t = this.$route.query.t || 'check'
    this.getData()
    // this.queryPage4comment()
  },
  methods: {
    handleCancel() {
      this.$router.replace(this.$filterPath('worksManage') + '?tab=' + this.$route.query.t + '&i=' + this.$route.query.pi)
    },

    handleSubmit(type) {
      if (this.form.auditResult === 'AUDITRESULT03' && !this.form.auditRemark) {
        this.$message({
          title: '提示',
          message: '请填写审核原因',
          type: 'warning',
          duration: 2000
        })
        return
      }
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        audit({
          id: this.form.id,
          auditResult: this.form.auditResult,
          auditRemark: this.form.auditRemark
        }).then(res => {
          loading.close()
          this.$message({
            title: '成功',
            message: '审核成功',
            type: 'success',
            duration: 1000,
            onClose: () => {
              if (type === 'back') {
                this.$router.back()
              } else {
                if (res.data.data.data) {
                  this.form.id = res.data.data.data
                  this.getData()
                } else {
                  this.$message({
                    title: '提示',
                    message: '已全部审核完成',
                    type: 'success',
                    duration: 1000,
                    onClose: () => {
                      this.handleCancel()
                    }
                  })
                }
              }
            }
          })
          resolve()
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },
    /**
     * 根编辑回显
     */
    getData() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        get({ id: this.form.id }).then(res => {
          loading.close()
          if (res.data.data) {
            this.worksInfo = res.data.data
            this.worksInfo['imgIds'] = res.data.data.imgIds ? res.data.data.imgIds.split(',') : []
            this.worksInfo['videoIds'] = res.data.data.videoIds ? res.data.data.videoIds.split(',') : []
            this.worksInfo.worksRemark = this.worksInfo.worksRemark.replace(/\n/g, '<br/>')
            // this.form.auditResult = res.data.data.auditResult || 'AUDITRESULT02'
            this.form.auditRemark = res.data.data.auditRemark || ''
          }
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },
    /**
     * 获取评论列表
     */
    queryPage4comment() {
      return new Promise((resolve, reject) => {
        this.page = 1
        this.previewLoading = true
        queryPage4comment({ page: this.page, pageSize: this.pageSize, worksId: this.$route.query.i }).then(res => {
          this.previewLoading = false
          res = res.data
          if (res && res.code === '200') {
            this.commentData = res.data.rows || []
            this.total = res.data.total
            if (this.commentData.length < this.pageSize || this.commentData.length >= this.total) {
              if (this.commentData.length === 0) {
                this.isNoData4comment = true
              } else {
                this.isNoData4comment = false
              }
              this.finished = true
            } else {
              this.finished = false
            }
            this.page++
            resolve()
          } else {
            this.isNoData4comment = true
            reject()
          }
        }).catch(() => {
          this.isNoData4comment = true
          this.previewLoading = false
          reject()
        })
      })
    },
    onLoad() {
      if (this.finished) {
        this.$message({
          title: '提示',
          message: '没有更多了~',
          type: 'warning',
          duration: 2000
        })
        return
      }
      this.previewLoading = true
      queryPage4comment({ page: this.page, pageSize: this.pageSize, worksId: this.$route.query.i }).then(res => {
        this.previewLoading = false
        res = res.data
        if (res && res.code === '200') {
          const _list = res.data.rows || []
          this.commentData = [...this.commentData, ..._list]
          this.total = res.data.total || 0
          if (_list.length < this.pageSize || this.commentData.length >= this.total) {
            this.finished = true
            return
          }
          this.page++
        } else {
          this.error = true
        }
      }).catch(() => {
        this.previewLoading = false
        this.error = true
      })
    },
    /**
     * 获取二级评论列表
     */
    getMoreComment(pIndex, curNum, rootId) {
      this.previewLoading = true
      const page = Math.ceil(curNum / 5) + 1
      queryPage4commentSon({
        page: page,
        pageSize: 5,
        worksId: this.$route.query.i,
        commentRootId: rootId
      }).then(res => {
        res = res.data
        this.previewLoading = false
        if (res && res.code === '200') {
          const _list = res.data.rows || []
          if (_list.length > 0) {
            _list.forEach(item => {
              this.commentData[pIndex].newsSonCommentVOList.rows.push(item)
            })
          }
        }
      }).catch(() => {
        this.previewLoading = false
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

.works-check {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 20px;
  display: flex;
  .page-left{
    flex: 1;
    margin-right: 20px;
    background-color: #fff;
    height: 100%;
    position: relative;
    .left-top {
      padding: 20px 0 12px 20px;
      border-bottom: 1px solid #eeeeee;
      .title {
        font-size: 20px;
        font-family: PingFang SC Medium, PingFang SC Medium-Medium;
        font-weight: bold;
        text-align: left;
        color: #333333;
        margin-bottom: 10px;
      }
      .auther-info{
        font-size: 14px;
        font-family: PingFang SC Regular, PingFang SC Regular-Regular;
        text-align: left;
        color: #999999;
      }
    }
    .left-bottom {
      padding: 20px 40px 0;
      position: absolute;
      top: 82px;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: auto;
      .el-col{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .el-image,video {
        display: block;
        margin-bottom: 20px;
        width: auto;
        max-width: 100%;
        height: 300px;
        img{
          width: auto;
          max-width: 100%;
          height: 300px;
        }
      }
    }
  }
  .page-right {
    flex: 0 0 310px;
    height: 100%;
    position: relative;
    .right-top {
      background-color: #fff;
      margin-bottom: 20px;
      padding: 16px 18px;
      .title {
        font-size: 14px;
        font-weight: bold;
        text-align: left;
        color: #333333;
        margin-bottom: 14px;
      }
      .el-radio-group {
        .el-radio{
          margin-right: 10px;
        }
        margin-bottom: 10px;
      }
      .el-textarea {
        margin-bottom: 16px;
      }

    }
    .right-bottom {
      background-color: #fff;
      position: absolute;
      top: 250px;
      bottom: 0;
      left: 0;
      right: 0;
      overflow: auto;
      padding: 20px;
      .title{
        font-size: 14px;
        text-align: left;
        color: #999999;
        margin-bottom: 10px;
      }
      .cover-image, img{
        width: 100%;
        height: 180px;
      }
      .comment{
        height: 48px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        margin-top: 18px;
        span:first-child {
          font-size: 14px;
          color: #999;
          b{
            color: #333;
          }
        }
        span:last-child {
          font-size: 14px;
          color: $mainColor;
        }
      }
      .works-remark {
        font-size: 14px;
        .title {
          text-align: left;
          color: #999999;
        }
        .remark-content {
          color: #333;
          line-height: 2;
          *{
            word-wrap: break-word !important;
            max-width: 100% !important;
            overflow: hidden;
          }
        }
      }
    }
  }
}
.commont-dialog {
  .el-dialog__body {
    height: calc(100vh - 57px);
    overflow: auto;
  }
  .comment-con {
    position: relative;
    min-height: 150px;
    ul{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .comment-item {
      display: flex;
      margin-bottom: 30px;
      width: 100%;

      &:last-child {
        margin-bottom: 10px;
      }

      & > img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
        flex: 0 0 auto;
      }

      .comment-item-right {
        flex: 1;
        .comment-item-right-content {
          display: flex;
          justify-content: space-between;

          .comment-name {
            font-size: 14px;
            font-family: PingFangSC-Regular;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            line-height: 18px;
          }
        }

        .comment-time {
          display: flex;
          align-items: center;
          font-size: 12px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: #999;
          line-height: 18px;

          .reply {
            margin-left: 10px;
            color: #666;
          }
        }

        .comment-content {
          width: 293px;
          font-size: 14px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 21px;
          margin-top: 5px;
          word-wrap: break-word;
        }

        .comment-img {
          display: flex;
          margin: 5px 0;
          .el-image {
            margin-left: 5px;
            width: 84px;
            height: 84px;
            &:first-child {
              margin-left: 0;
            }
            img {
              width: 84px;
              height: 84px;
              border-radius: 6px;
            }
          }

        }

        .reply-content {
          width: 100%;
          background-color: #fafafa;
          padding: 10px 10px;
          margin-top: 5px;

          li {
            margin-bottom: 20px;
            position: relative;

            &:last-child {
              margin-bottom: 0;

              &:after {
                display: none;
              }
            }

            &:after {
              left: 0;
              right: 0;
              width: auto;
              height: 1px;
              position: absolute;
              z-index: 0;
              bottom: -10px;
              content: "";
              background-image: -webkit-gradient(
                      linear,
                      left bottom,
                      left top,
                      color-stop(50%, #ececec),
                      color-stop(0, transparent)
              );
              background-image: linear-gradient(0deg, #ececec 50%, transparent 0);
            }
          }

          .reply-info {
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .replyer {
              color: #9E9E9E;

              span {
                color: #666;
              }
            }

            .reply-info {
              color: #333;
              font-weight: bold;
            }
          }

          .reply-img {
            display: flex;
            margin: 10px 0;
            justify-content: flex-start;
            .el-image {
              margin-left: 5px;
              width: 84px;
              height: 84px;
              &:first-child {
                margin-left: 0;
              }
              img {
                width: 84px;
                height: 84px;
                border-radius: 6px;
              }
            }
          }

          .reply-time {
            color: #999;
            font-size: 12px;
            margin-top: 8px;

            .reply {
              margin-left: 10px;
              color: #666;
            }
          }

          .get-son {
            cursor: pointer;
            text-align: center;
            @include font-color($mainColor)
          }
        }
      }
    }
  }
}

</style>
